<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      <!-- <span>
        <input type="checkbox" />
        </span>  -->
        <slot :row="item"></slot>
        <!-- <span>{{item.text}}</span> -->
    </li>
    <!-- <li>
      <span>
        <input type="checkbox" />
        </span> <span>学习React</span>
    </li>
    <li>
      <span>
        <input type="checkbox" />
        </span> <span>学习js</span>
    </li> -->
  </ul>
</template>

<script>
export default {
    props:{
        data:{
            type:Array,
            default:'学习React'
        }
        },
        
    }

</script>

<style lang="less" scoped>
ul{
    list-style: none;
    width: 200px;
}
li{
    color: #fff;
    height: 30px;
    line-height: 30px;
    background:  linear-gradient(to right, pink, red);
    input{
        margin-right: 30px;
    }
}
</style>